import DxTable, { DxTableProps } from './DxTable';

const data = Array.from(new Array(12)).map((_, i) => ({
  month: i + 1,
  max: Math.round(Math.random() * 10),
  min: Math.round(Math.random() * 10),
  days: Math.round(Math.random() * 10),
  hours: Math.round(Math.random() * 10),
  mm: Math.round(Math.random() * 10),
  rainfall: Math.round(Math.random() * 10),
  mean: Math.round(Math.random() * 10),
}));
const columns: DxTableProps<ArrayType<typeof data>>['columns'] = [
  {
    dataIndex: 'month',
    title: () => {
      return 'Month';
    },
    render(text, record, i) {
      return `${i + 1}月`;
    },
  },
  { title: 'Maximum temperature (°C)', dataIndex: 'max' },
  { title: 'Minimum temperature (°C)', dataIndex: 'min' },
  { title: 'Days of air frost (days)', dataIndex: 'days' },
  { title: 'Sunshine (hours)', dataIndex: 'hours' },
  { title: 'Rainfall (mm)', dataIndex: 'mm' },
  { title: 'Days of rainfall ≥1&nbsp;mm (days)', dataIndex: 'rainfall' },
  { title: 'Monthly mean wind speed at 10&nbsp;m (knots)', dataIndex: 'mean' },
];

const Chart = () => {
  return <DxTable columns={columns} dataSource={data} rowKey={'month'} />;
};

export default Chart;
